<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>使用$emit触发事件实现子组件向父组件的数据传递</title>
	<script src="vue.js"></script>
</head>
<body>
<div id="app">
   <parent></parent>
</div>
<script>
var childNode = {
    template: `
    <div>
      <div>
        <span>子组件数据</span>
        <input v-model="childData" @input="data">
        <span>{{ childData }}</span>
      </div>   
    </div>
    `,
    data(){
      return{
        childData:''
      }
    },
    methods:{
      data(){
        this.$emit('pass-data',this.childData)
      }
    }
  }
var parentNode = {
    template: `
    <div>
      <div>
         <span>父组件数据</span>
         <input v-model="parentData">
         <span>{{ parentData }}</span>
      </div>   
      <child @pass-data="getData"></child>
    </div>
    `,
    components: {
      'child': childNode
    },
    data(){
      return {
        'parentData':'try'
      }
    },
    methods:{
      getData(value){
        this.parentData = value;
      }
    }
  };
// 创建根实例
var vm=new Vue({
  el: '#app',
  components: {
    'parent': parentNode
  }
})
</script>
</body>
</html>
